<template>
  <!-- 搜索 -->
  <div class="my-wbox">
    <!-- 搜索 -->
    <MySearch :searchData="searchData" @listenClick="listenClick" :isSearch="isSearch"></MySearch>
    <!-- 表格 -->
    <MyTable :tableData="tableData" @listenClick="listenClick">
      <template #default="{ slotData, slotColumn }">
        <!-- 市级得开启,hide(row: any): boolean { return row.roleId !=1} -->
        <div v-if="slotColumn.prop === 'status' && slotData.roleId != 1">
          <!-- 1.启用   2.禁用 -->
          <el-switch v-model="slotData.status" :active-value="1" :inactive-value="2" @change="onSwitch(slotData)" />
        </div>
        <div v-if="slotColumn.prop === 'status' && slotData.roleId == 1">--</div>
        <!-- 是否开通管理员权限 -->
        <div v-if="slotColumn.prop === 'administratorFlag'">
          <!-- 1.启用   0.禁用 -->
          <el-switch v-model="slotData.administratorFlag" :active-value="1" :inactive-value="0"
            @change="onSwitch(slotData)" />
        </div>
        <!-- 所属单位 -->
        <div v-if="slotColumn.prop === 'name'">
          <span v-if="slotData.roleId == 4">{{ slotData.townName }}</span>
          <span v-else-if="slotData.roleId == 5">{{ slotData.townName }}{{ slotData.countryName }}</span>
          <span v-else>{{ slotData.townName }}{{ slotData.countryName }}{{ slotData.groupName }}</span>
        </div>
      </template>
    </MyTable>
    <!-- 弹窗 -->
    <AddDialog :isShowDialog="isShowDialog" :dialogData="dialogData"></AddDialog>
    <!-- 添加弹窗 -->
    <AddUser :isShowDialog="isAddDialog" :dialogData="dialogAdd"></AddUser>
    <!-- 转出弹窗 -->
    <OutUser :isShowDialog="isOutDialog" :dialogData="dialogAdd"></OutUser>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'
import { useStore } from '@/store'
import { FunApi, FunTime } from '@/global/methods'
import MyTable from '@/components/MyTable.vue'
import MySearch from '@/components/MySearch.vue'
import { ParentSearch, ParentTable } from '@/interface/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserInfo } from '@/global/session'
import AddDialog from '@/views/account/components/AddDialog.vue'
import AddUser from '@/views/account/components/AddUser.vue'
import OutUser from './components/OutUser.vue'
const store = useStore()
let userInfo = reactive({ roleId: '' })
userInfo = JSON.parse(getUserInfo() as string)
const isShowDialog = ref<boolean>(false)//弹窗是否出现
let dialogData = ref({})//传给弹窗的数据

const isAddDialog = ref<boolean>(false)//新增弹窗是否出现
let dialogAdd = ref({})//新增传给弹窗的数据
// 搜索是否触发
const isSearch = ref<boolean>(false)
//封装的搜索
const searchData = reactive<ParentSearch>({
  searchForm: [
    { key: 'keyword', styleType: 'input', value: '', placeholder: '姓名/手机号' },
  ],
  searchBtn: [
    // userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3'
    { name: 'onAdd', text: '新增', type: 'primary', hide(row: any): boolean { return userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3' } },
    // { name: 'onAdd', text: '修改', type: 'primary', hide(row: any): boolean { return userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3' } },
  ],
  checkboxSelect: [],//表格多选 选中的值
})
//封装的表格 市
const tableData1 = {//表格的一些数据
  column: [//表头
    { prop: 'userName', label: '姓名', align: 'left' },
    { prop: 'userLogin', label: '手机号码' },
    { prop: 'name', label: '所属单位', slot: true },
    { prop: 'roleName', label: '角色' },
    { prop: 'administratorFlag', label: '（是否开通管理员权限）', slot: true },
  ],
  columnBtn: {//操作按钮
    label: '操作',
    align: 'center',
    width: '350',
    btn: [
      { name: 'onAdd', text: '编辑' },
      { name: 'onOut', text: '转出' },
      { name: 'myApi', text: '删除', color: '#FF1F1F', api: '/manage/admin/userInfo/deleteUser', http: 'deleteFormUrl', confirm: true, confirmText: 'userName', refresh: true, params: { userId: '' } },
      { name: 'onPassword', text: '重置密码' }
    ]
  },//表按钮
}
//封装的表格 乡镇
const tableData2 = {//表格的一些数据
  listApi: '/manage/admin/userInfo/pageList',//列表搜索接口
  listHttp: 'post',//列表接口方法
  search: {},//搜索条件
  column: [//表头
    { prop: 'userName', label: '姓名', align: 'left' },
    { prop: 'userLogin', label: '手机号码' },
    { prop: 'name', label: '所属单位', slot: true },
    { prop: 'roleName', label: '角色' },
    { prop: 'status', label: '是否禁用', slot: true }
  ],
}
const tableData: ParentTable = {
  listApi: '/manage/admin/userInfo/pageList',//列表搜索接口
  listHttp: 'post',//列表接口方法
  search: {},//搜索条件
  index: true,//true 显示序号
  column: []
}
if (userInfo.roleId == '4') {
  tableData.column = tableData1.column
  tableData.columnBtn = tableData1.columnBtn
} else {
  tableData.column = tableData2.column
}
//禁用 onDisable 用户状态 2、禁用 1、启用
const onSwitch = async (val: any) => {
  if (val?.userId) {
    //调接口公共方法
    if (userInfo.roleId != '4') {
      let text = val.status == 1 ? '启用' : '禁用'
      let params = {
        userId: val.userId,
        status: val.status
      }
      FunApi('put', '/manage/admin/userInfo/updateStatus', params, true, text, true)
    } else {
      let text = val.administratorFlag == 1 ? '启用' : '禁用'
      if (val.administratorFlag) {
        //启用
        dialogData.value = val
        isShowDialog.value = !isShowDialog.value
      } else {
        let params = {
          userId: val.userId,
          administratorFlag: val.administratorFlag
        }
        FunApi('put', '/manage/admin/userInfo/updateUserAuth', params, true, text, true)
      }
    }
  }
}
//重置密码 二次确认弹窗
const onPassword = (val: any) => {
  ElMessageBox.confirm(
    `确定重置为初始密码：qmrh.123456 ?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      onPasswordApi(val)
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '取消重置密码' })
    })
}
// 重置密码 api
const onPasswordApi = async (val: any) => {
  if (val?.userId) {
    let params = {
      userId: val.userId,
    }
    let text = '密码重置'
    //调接口公共方法
    FunApi('put', '/manage/admin/userInfo/resetPwd', params, true, text)
  }
}
//列表搜索
const onSearch = (val: any) => {
  tableData.search = val
  //刷新表格
  store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
}
//新增弹窗 
const onAdd = (val: any) => {
  dialogAdd.value = val
  isAddDialog.value = !isAddDialog.value
}

const isOutDialog = ref<boolean>(false)//新增弹窗是否出现
//转出
const onOut = (val: any) => {
  dialogAdd.value = val
  isOutDialog.value = !isOutDialog.value
}
//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = { 'onSearch': onSearch, 'onSearchClear': onSearch, 'onPassword': onPassword, 'onAdd': onAdd, 'onOut': onOut }
// 监听子级表格  传过来的方法禁用
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}
</script>
<style scoped lang='scss'>

</style>